<template>
    <div class="home">
        <slide-out :visible.sync="demo4Visible" dock="left"  size="200px">
            <div class="head_img"></div>
            <div style="text-align: center;margin:0.2rem 0 0.14rem 0"><img src="../assets/imgs/menu_page_logo2@2x.png" alt="" class="img_logo"></div>
            <div class="home_id">ID: {{userInfo.id}}</div>
            <div class="list" @click="$router.push({name:'feedBack'})">
                <img src="../assets/imgs/menu_page_proposal@2x.png" alt="">
                <span>意见反馈</span>
            </div>
            <div class="list" @click="$router.push({name:'changePassword'})">
                <img src="../assets/imgs/menu_page_password@2x.png" alt="">
                <span>修改密码</span>
            </div>
            <div class="list" @click="signOut">
                <img src="../assets/imgs/menu_page_signout@2x.png" alt="">
                <span>退出登录</span>
            </div>
        </slide-out>
        <section class="wraper-page">
            <div class="header"  >
                <div class="header-bg"></div>
                <div class="header-icon">
                    <img src="../assets/imgs/nav_bar_menu@2x.png" alt="" class="btn-slide-bar" @click="demo4Visible = true">
                    <img src="../assets/imgs/nav_bar_report@2x.png" alt="" style="position: relative;z-index: 3;" @click="$router.push({name:'pdfList'})">
                    <!--<img src="../assets/imgs/nav_bar_report@2x.png" alt="" style="position: relative;z-index: 3">-->
                </div>
                <div class="header-title">{{tr_name}}旅游大数据</div>
                <div class="header-count">
                    <div class="header-count-left">
                        <div class="name">今日入园采样人数</div>
                        <div class="num">{{allCount.crowdCount}}</div>
                        <div class="name">较昨日采样人数<span v-if="allCount.crowdCount-allCount.crowdCountYesterday < 0">减少</span><span v-else>增加</span>
                            {{Math.abs(allCount.crowdCount - allCount.crowdCountYesterday)}}人
                        </div>
                    </div>
                    <div class="header-count-right">
                        <div class="name">年度累计采样人数</div>
                        <div class="num">{{allCount.crowdCountYear}}</div>
                        <div class="name">去年采样总人数{{allCount.crowdCountLastYear}}人</div>
                    </div>
                </div>
            </div>
            <div class="content">
                <div class="content-wraper">
                    <div class="content-box" @click="$router.push({name:'touristFlow'})">
                        <div class="title">游客流量</div>
                        <div>
                            <span class="icon">客流量</span>
                            <span class="icon">停留时长</span>
                        </div>
                    </div>
                    <div class="content-box" @click="$router.push({name:'scenicSpotHeating'})">
                        <div class="title">景区热力</div>
                        <div>
                            <span class="icon">景区热力图</span>
                        </div>
                    </div>
                    <div class="content-box" @click="$router.push({name:'touristStyle'})">
                        <div class="title">游客特征</div>
                        <div>
                            <span class="icon">客源地统计</span>
                            <span class="icon">游客特征</span>
                            <span class="icon">手机品牌</span>
                        </div>
                    </div>
                    <div class="content-box" @click="$router.push({name:'businessInterests'})">
                        <div class="title">商业兴趣</div>
                        <div>
                            <span class="icon">搜索偏好</span>
                            <span class="icon">消费水平</span>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </div>
</template>

<script>
    import {Notify,Dialog} from 'vant';
    import SlideOut from '@hyjiacan/vue-slideout';
    // import {api} from '../api.js';
    export default {
        name: "index",
        components: {
            SlideOut,
            [Notify.name]: Notify,
            [Dialog.name]: Dialog
        },
        data() {
            return {
                allCount: {},
                tr_id: '',
                position:null,
                userInfo:{},
                demo4Visible: false,
                tr_name: '',
                times:null
            }
        },
        created() {
            // apiready=function(){
            //     this.back();
            // }
        },
        mounted() {
            let _this = this;
            // window.apiready = function() {
                setTimeout(()=>{
                    if (api) {
                    _this.back();
                    }
                },0);

            _this.tr_id = localStorage.getItem('tr_id');
            _this.tr_name = localStorage.getItem('tr_name');
            _this.userInfo = JSON.parse(localStorage.getItem('userInfo'));
            _this.getALLData(['crowdCount']);
            // _this.times = setInterval(()=>{
            //     _this.getALLData1(['crowdCount']);
            // },5000)
        },
        // beforeDestroy() {
        //     clearInterval(this.times);
        // },
        beforeDestroy() {
            if (api) {
                api.removeEventListener({
                    name: 'keyback'
                });
            }

        },
        methods: {
            back() {
                let backSecond = 0;
                api.addEventListener({
                    name: 'keyback'
                }, function (ret, err) {
                    let curSecond = (new Date().getTime()) / 1000;
                    if (Math.abs(curSecond - backSecond) > 2) {
                        backSecond = curSecond;
                        api.toast({
                            msg: '再按一次退出',
                            duration: 1000,
                            location: 'bottom'
                        });
                    } else {
                        // clearInterval(this.times);
                        api.closeWidget({
                            silent: true
                        });

                    }
                });

            },
            signOut() {
                Dialog.confirm({
                    title: '提示',
                    message: '确定退出登录吗?'
                }).then(() => {
                    localStorage.clear();
                    this.$router.replace({name:'login'});
                }).catch(() => {
                    // on cancel
                });
            },
            getALLData(arg) {
                // this.$store.commit('showLoading');
                this.$http.get('auth/mac?tr_id=' + this.tr_id, {
                    params: {
                        "@action": arg.join(',')
                    }
                })
                .then((result) => {
                    if (result.status_code == 200) {
                        this.allCount = result.data.crowdCount;
                    } else {
                        Notify({
                            message: result.msg,
                            duration: 1000,
                            background: '#ff0000'
                        })
                    }
                    // this.$store.commit('hideLoading');
                })
                    .catch((err)=>{
                        // this.$store.commit('hideLoading');
                        Notify({
                            message: err.data.msg || "数据异常，请重试",
                            duration: 1000,
                            background: '#ff0000'
                        })
                    })
            },
            getALLData1(arg) {
                this.$http.get('auth/mac?tr_id=' + this.tr_id, {
                    params: {
                        "@action": arg.join(',')
                    }
                })
                    .then((result) => {
                        if (result.status_code == 200) {
                            this.allCount = result.data.crowdCount;
                        } else {
                            Notify({
                                message: result.msg,
                                duration: 1000,
                                background: '#ff0000'
                            })
                        }
                    })
                    .catch((err)=>{
                        Notify({
                            message: err.data.msg || "数据异常，请重试",
                            duration: 1000,
                            background: '#ff0000'
                        })
                    })
            }
        }
    }
</script>
<style lang="less">
    .van-dialog{
        border-radius: 0.14rem;
        width:2.7rem;
        height:auto;
        background:rgba(255,255,255,1);
    }
    .van-button--default{
        color: #007AFF;
    }
    .van-dialog__confirm, .van-dialog__confirm:active{
        color: #007AFF;
    }
    .van-dialog__header{
        padding-top: 0.19rem;
        font-size:0.17rem;
        font-weight:bold;
        color:rgba(0,0,0,1);
    }
    .van-dialog__message{
        padding: 0.13rem 0.16rem 0.26rem;
        font-size:0.13rem;
        color:rgba(0,0,0,1)
    }
    .home {
        .slide-mask{
            background-color: rgba(0,0,0,0.2);
        }
        .slide-content{
            background:#272832 url("../assets/imgs/menu_page_shading@2x.png")  top center no-repeat;
            background-size: 100% 60%;
            padding: 0;
            .head_img{
                width:0.6rem;
                height:0.6rem;
                box-shadow:0px 0.08rem 0.23rem 0px rgba(116,127,161,0.21);
                border:1px solid rgba(116,127,161,0.13);
                border-radius: 50%;
                margin: 0.4rem auto 0;
                background: url("../assets/imgs/menu_page_logo@2x.png") center center no-repeat;
                background-size: 40% 40%;
            }
            .img_logo{
                width:0.88rem;
                height:0.18rem;
            }
            .home_id{
                text-align: center;
                font-size: 0.12rem;
                color:rgba(255,255,255,0.4);
                padding-bottom: 0.46rem;
            }
            .list{
                width: 100%;
                height: 0.5rem;
                display: flex;
                align-items: center;
                font-size:0.15rem;
                color:rgba(255,255,255,0.8);
                border-bottom: 1px solid rgba(255,255,255,0.1);
                img{
                    width:0.16rem;
                    height:0.16rem;
                    color: #fff;
                    margin: 0 0.06rem 0 0.18rem;
                }
            }
        }
        .slide-layout{
            border-right: none;
            background-color: #272832;
            border-left: none;
        }
        .header {
            position: relative;
            box-sizing: border-box;
            width: 100%;
            height: 2.67rem;
            padding: 0.2rem 0.16rem;
            background: linear-gradient(135deg, rgba(114, 153, 255, 1) 0%, rgba(19, 84, 252, 1) 100%);
            .header-bg {
                position: absolute;
                right: 0rem;
                top: 0rem;
                width: 2.18rem;
                height: 2.02rem;
                background: url("../assets/imgs/menu_page_shading@2x.png") center center no-repeat;
                transform: rotate(90deg);
                -webkit-background-size: 100% 100%;
                background-size: 100% 100%;
            }
            .header-icon {
                display: flex;
                justify-content: space-between;
                padding-top: 0.16rem;
                img {
                    width: 0.18rem;
                    height: 0.18rem;
                    color: rgba(255, 255, 255, 0.7);
                }
            }
            .header-title {
                font-size: 0.28rem;
                font-weight: 600;
                color: rgba(255, 255, 255, 1);
                line-height: 0.28rem;
                padding: 0.24rem 0 0.3rem;
            }
            .header-count{
                display: flex;
                .name{
                    color: #fff;
                    font-size: 0.12rem;
                }
                .num{
                    color: #fff;
                    font-size: 0.32rem;
                    padding: 0.08rem 0;
                }
                .header-count-left{
                    border-right: 1px solid rgba(255,255,255,0.1);
                }
                .header-count-right{
                    padding-left: 0.16rem;
                }
                .header-count-left,.header-count-right{
                    width: 50%;
                }
            }
        }
        .content {
            .content-wraper {
                position: relative;
                width: 3.43rem;
                margin: -0.35rem auto 0;
                .content-box {
                    box-sizing: border-box;
                    width: 100%;
                    height: 1.1rem;
                    box-shadow: 0px 0.16rem 0.4rem 0px rgba(119, 136, 175, 0.2);
                    border-radius: 0.06rem;
                    margin-bottom: 0.14rem;
                    padding: 0.24rem 0 0 0.2rem;
                    .title {
                        font-size: 0.2rem;
                        font-weight: bold;
                        color: rgba(40, 44, 52, 1);
                        line-height: 20px;
                        margin-bottom: 0.2rem;
                    }
                    .icon {
                        background: rgba(64, 117, 253, 0.15);
                        border-radius: 0.02rem;
                        font-size: 0.12rem;
                        font-weight: 500;
                        color: rgba(64, 117, 253, 1);
                        line-height: 0.12rem;
                        padding: 0.02rem 0.04rem;
                        margin-right: 0.06rem;
                    }
                }
                .content-box:nth-of-type(1) {
                    background: rgba(255, 255, 255, 1) url("../assets/imgs/home_page_listicon1@2x.png") right center no-repeat;
                    background-size: 0.78rem 1rem;
                }
                .content-box:nth-of-type(2) {
                    background: rgba(255, 255, 255, 1) url("../assets/imgs/home_page_listicon2@2x.png") right center no-repeat;
                    background-size: 0.78rem 1rem;
                }
                .content-box:nth-of-type(3) {
                    background: rgba(255, 255, 255, 1) url("../assets/imgs/home_page_listicon3@2x.png") right center no-repeat;
                    background-size: 0.78rem 1rem;
                }
                .content-box:nth-of-type(4) {
                    background: rgba(255, 255, 255, 1) url("../assets/imgs/home_page_listicon4@2x.png") right center no-repeat;
                    background-size: 0.78rem 1rem;
                }
            }

        }

    }
</style>
<style scoped>

</style>